<template>
  <div>
    <common-header title="购物车"></common-header>
    <div class="cartWrap">
      <div class="noCartItem" v-show="!cart.items.length">
        <van-icon class-prefix="icon" class="iconfont" name="gouwuche" size="70"></van-icon>
        <p>您的购物车暂无商品</p>
        <van-button type="default" size="small" color="#444" to="/home">随便逛逛</van-button>
      </div>
      <van-swipe-cell v-for="(item, index) in cart.items" :key="item.id" v-show="cart.items.length">
        <div class="cartItem">
          <van-checkbox v-model="item.isChecked" @change="itemCheckChange"></van-checkbox>
          <van-card
            :num="item.num"
            :price="(item.minPrice*item.num).toFixed(2)"
            :title="item.name"
            :origin-price="item.originalPrice"
            class="goods-card"
            :thumb="item.pic"
          >
          <template #tags>
            <van-stepper v-model="item.num" integer @change="itemNumChange" />
          </template>
          </van-card>
        </div>
        <template #right>
          <van-button square text="删除" type="danger" class="delete-button" @click="delItem(index)"/>
        </template>
      </van-swipe-cell>
      <div class="divideBg"></div>
      <guess-like :likes="likes"></guess-like>
    </div>
    <van-submit-bar :price="cart.total*100" button-text="提交订单" @submit="onSubmitOrder" v-if="cart.items.length">
      <van-checkbox v-model="cart.isAllChecked" @click="itemAllCheck">全选</van-checkbox>
    </van-submit-bar>
    <common-tabbar></common-tabbar>
  </div>
</template>

<script>
import CommonTabbar from '@components/CommonTabbar'
import CommonHeader from '@components/CommonHeader'
import GuessLike from './components/GuessLike'
import { isCheckLogin } from '@utils'
import { getLike } from '@api'
import { mapMutations, mapState } from 'vuex'
import { Dialog, Toast } from 'vant'
export default {
  data () {
    return {
      checked: '',
      likes: []
    }
  },
  computed: {
    ...mapState({
      cart: state => state.cart.carts
    })
  },
  components: {
    CommonTabbar,
    CommonHeader,
    GuessLike
  },
  methods: {
    // 提交订单
    onSubmitOrder () {
      if (!this.cart.items.length) {
        Toast('您的购买车中没有商品，赶快选择你喜欢的商品后在提交订单吧')
        return
      }
      // 选中选中的商品进行提交订单
      const checkItems = this.cart.items.filter(ele => ele.isChecked)
      // 如果没有登陆先登录在回到购物车
      if (!isCheckLogin()) {
        this.$router.push({
          path: '/login',
          query: {
            from: '/cart'
          }
        })
      } else {
        // 如果购物车中有选中的商品
        if (checkItems.length) {
          const orderInfo = {
            orderNum: Date.now(),
            status: 0,
            contact: {
              name: '',
              tel: ''
            },
            items: checkItems,
            total: 12
          }
          this.setOrder(orderInfo)
          this.$router.push('/order')
        } else {
          Toast('请选中您要购买的商品在提交订单')
        }
      }
    },
    fetchCartLike () {
      getLike({
        categoryId: 173941
      }).then(res => {
        this.likes = res.data.data
      })
    },
    // 删除商品
    delItem (index) {
      Dialog.confirm({
        title: '删除',
        message: '您确定要删除这件商品吗'
      }).then(() => {
        this.delItems(index)
        this.countTotal()
        // 每次删除完商品后重新遍历所有的商品数据的选中状态，在重新判断全选按钮的选中状态
        let allChecked = this.cart.items.every(ele => ele.isChecked)
        if (this.cart.items.length === 0) {
          allChecked = false
        }
        this.allCheckedChange(allChecked)
      }).catch(() => {
      })
    },
    // 商品数量改变
    itemNumChange () {
      this.updateItem(this.cart.items)
      this.countTotal()
    },
    // 全选改变单选
    itemAllCheck () {
      this.updateItem(this.cart.items)
      this.countTotal()
      this.singleChekChange(this.cart.isAllChecked)
    },
    // 单选改变全选
    itemCheckChange () {
      this.updateItem(this.cart.items)
      this.countTotal()
      const allChecked = this.cart.items.every(ele => ele.isChecked)
      // 处理全选状态
      this.allCheckedChange(allChecked)
    },
    ...mapMutations('cart', ['countTotal', 'updateItem', 'allCheckedChange', 'singleChekChange', 'delItems']),
    ...mapMutations('order', ['setOrder'])
  },
  created () {
    this.fetchCartLike()
    this.countTotal()
  }
}
</script>

<style lang="scss" scoped>
.cartWrap {
  padding-top: 56.25px;
  padding-bottom: 100px;
  .noCartItem {
    height: 300px;
    background-color: #f0f0f0;
    text-align: center;
    i {
      display: inline-block;
      margin-top: 50px;
      color: #505050;
    }
    p {
      color: #444;
      margin-top: 10px;
    }
    button {
      margin-top: 10px;
    }
  }
  .cartItem {
    display: flex;
    .van-card {
      padding-left: 0;
      flex: 1;
    }
    .van-checkbox {
      margin: 0 8px;
    }
    .van-card__price {
      color: #f66;
    }
    .van-card__title {
      margin-bottom: 5px;
    }
  }
}
.van-submit-bar {
  bottom: 50px;
}
.delete-button {
  height: 100%;
}
</style>
